<!--  -->
<template>
  <div>
    <!-- S 店铺列表 -->
    <div class="wrapper__store">
      <p style="font-size: .16rem; font-weight: bold; margin: .22rem 0;">附近店铺</p>
      <shop-info v-for="item in nearByList"
                 :key="item.id"
                 :item="item" />
    </div>
    <!-- E 店铺列表 -->
  </div>
</template>

<script>
import { ref } from 'vue'
import { get } from '../../utils/request'
import ShopInfo from '../../components/ShopInfo'

const useNearByListEffect = () => {
  const nearByList = ref([])
  const getNearByList = async () => {
    const result = await get('/api/shop/hot-list')
    if (result?.code === 200 && result?.data?.length) {
      nearByList.value = result.data
    }
  }
  return { nearByList, getNearByList }
}

export default {
  name: 'StoreList',
  components: { ShopInfo },
  setup () {
    const { nearByList, getNearByList } = useNearByListEffect()
    getNearByList()
    return { nearByList }
  }
}
</script>

<style lang='scss'>
</style>
